<template>
  <div class="page">
    <div class="page-box">
      <div class="m-b-30" @click="goto('/')"><van-icon name="arrow-left" /> 返回</div>
      <h1 class="yx-title">您好，欢迎登录！</h1>
      <p class="yx-title2">{{ systemTitle }}</p>
      <div class="input-boxs">
        <div class="username">
          <div class="input-top-line">
            <span class="ico-span">姓名</span>
          </div>
          <div>
            <input v-model="idcard" type="text" />
          </div>
          <div class="input-top-line">
            <span class="ico-span">身份证号</span>
          </div>
          <div>
            <input v-model="password" type="text" />
          </div>
        </div>
        <div class="password"></div>
      </div>
      <div class="btn-box">
        <van-button type="primary" tag="div" block class="m-b-20" @click="login('cun')">村账号</van-button>
        <van-button type="primary" tag="div" block class="m-b-20" @click="login('zhen')">镇账号</van-button>
        <van-button type="primary" tag="div" block @click="login('xian')">县账号</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Notify } from 'vant'

const route = useRoute()
const { userStore } = useStore()
const { goto, gotoLink } = useGoto()
const { systemTitle } = useGlobal()

const idcard = ref('')
const password = ref('')

const login = (state) => {
  if (DuUtil.isEmpty(idcard.value)) {
    Notify({ type: 'warning', message: '用户名不能为空' })
    return
  }
  if (DuUtil.isEmpty(password.value)) {
    Notify({ type: 'warning', message: '密码不能为空' })
    return
  }
  userStore
    .login({
      name: idcard.value,
      idCard: password.value,
      state,
    })
    .then(() => {
      goto(route.query.redirect || '/')
    })
}
</script>

<style lang="scss" scoped>
.page-box {
  background-color: transparent;
  padding: 0 70px;
  box-sizing: border-box;
  top: 80px;
}

.yx-title {
  font-size: 46px;
}
.yx-title2 {
  font-size: 32px;
  margin-top: 36px;
  color: #222;
}
.input-boxs {
  margin-top: 110px;
  .ico-user {
    width: 30px;
    vertical-align: middle;
  }
  .ico-id {
    width: 34px;
    vertical-align: middle;
  }
  input {
    box-sizing: border-box;
    padding: 40px;
    width: 100%;
    height: 96px;
    background: #ffffff;
    box-shadow: 0px 10px 15px 0px rgba(184, 184, 184, 0.1);
    border-radius: 14px;
    border: 0;
    margin-bottom: 74px;
  }
  .ico-span {
    font-size: 30px;
    color: #222;
    font-weight: bold;
    margin-left: 20px;
    vertical-align: middle;
  }
  .input-top-line {
    margin-bottom: 20px;
  }
}

.btn-box {
  margin-top: 140px;
}
</style>
